<template>
	<view class="">
		<view class="setDisplayCenter  ">
			<u-search @input="textIdeal" @search="searchResult" @custom="searchResult" v-model="keyword"
				:show-action="true" input-align="center" height="70" shape="square" :clearabled="true">
			</u-search>
			<view class="">
				<u-button size="mini" @click="allSearch" type="success">全库搜索</u-button>
			</view>
		</view>
		<u-loadmore v-if="status=='loading'" height="100" fontSize="28" iconSize="28" :status="status" />
		<view v-if="textTip&&apiflag&&inputData.length>0" class="setAboutCenter ">
			<view class="setSearchIdeal ">
				<view @click="toDetailEnterprise(item._id)" class="" v-for="(item,index) in inputData">

					<view v-if="item.check" class="setVertical">
						<view class="" v-html="item.companyName">
						</view>
						<view class="setMiniFont setFontColor1 setOnlyDisplay" style="align-self: flex-end;"
							v-for="(item2,index2) in item.companyHistoryNames" :key="index2">
							<text v-if="index2==0">（曾用名）</text>
							<view v-html="item2">
							</view>
						</view>
					</view>
					<view v-else class="setSearchIdealItem" v-html="item.companyName"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import validator from '@/common/validator'
	export default {
		props: {
			apiflag: {
				type: String,
				default: ''
			},
			keyword2: {
				type: String,
				default: ''
			},
			textTip2:{
				type: Boolean,
				default: true
			}

		},
		data() {
			return {
				keyword: '',
				textTip: false,
				// 存放api
				curentApi: null,
				// 存储数据
				inputData: [],
				status: null

			}
		},
		beforeMount() {
			this.textTip = false
			// 判断改使用哪个api
			if (this.apiflag) {

				if (this.apiflag == 1) {
					// 查企业api
					this.curentApi = this.$baseApp.api.check.findCompanyName
				}


			}
		},
		watch: {
			//haveTask 为接收参数的名称
			keyword2: {
				handler(newValue, oldValue) {
					this.keyword = newValue
				},
				deep: true // 深度监听父组件传过来对象变化
			},
			textTip2: {
				handler(newValue, oldValue) {
					this.textTip = newValue
					// console.log("newValue, oldValue",newValue, oldValue)
				},
				deep: true // 深度监听父组件传过来对象变化
			},
			textTip: {
				handler(newValue, oldValue) {
					this.$emit('textTipChange', newValue)
				},
				deep: true // 深度监听父组件传过来对象变化
			}
		},


		methods: {
			allSearch(){
				this.$emit('allSearch')
			},
			searchResult(value) {

				this.textTip = false
				// 点击搜索  验证不为空后，调用接口
				if (!validator.checkNullValue(value)) {
					return;
				}
				this.$emit('searchResult', value)
			},
			// 文本联想
			textIdeal(words) {
				// console.log("words", words)
				this.$emit('moreKeyWord', words)
				if (uni.$u.trim(words) && words != null) {
					
					
					this.textTip = true
					// 查询自动完成数据
					if (this.curentApi) {
						this.status = 'loading'
						this.inputData = []
						this.$app.request({
							url: this.curentApi,
							data: {
								name: words
							},
							method: 'GET',
							dataType: 'json',
							success: res => {
								this.inputData = []
								if (res.code == 200) {
									res.data.content.forEach(item => {
										if (item.companyName.indexOf(words) > -1) {
											item.check = false
											item.companyName = validator.joinStr2(item.companyName,
												words)
											// 只显示现在的名字
										} else {
											item.check = true
											// 显示过去和现在的名字
											// 过去名分割
											item.companyHistoryNames = validator.joinStr2(item
												.companyHistoryNames, words)
											item.companyHistoryNames = item.companyHistoryNames.split(
												"$$$")

										}
										this.inputData.push(item)
									})

								}
							},
							complete: res => {
								this.status = null
							}
						});
					}


				} else {
					this.textTip = false
				}
			},
			inputBlur(e) {
				this.textTip = false
			},
			// 跳转至公司详情页面
			toDetailEnterprise(id) {
				// console.log("id", id)
				// 将企业ID传值至详情页面
				uni.navigateTo({
					url: `/pagesFind/detailenterprise/detailenterprise?companyCid=${id}`
				})
			}
		}
	}
</script>

<style>
	.fixedSeacher {
		width: 100%;
		height: 120rpx;

		background-color: #fff;

		border-bottom: 1rpx solid #eee;

	}
</style>
